<template>
  <div class="page-wrap">
    <div class="page-title">国际化</div>
    <div class="page-sub-title">Demo</div>
    <div>
      <el-button @click="click">切换语言为{{ lang == 'zhCn' ? '英文':'中文'}}</el-button>
      <div style="margin:24px 0 14px;">cds的组件</div>
      <div>
	      <CdsMonthSlider
		      v-model="month"
		      v-model:checkbox="checkbox"
		      :show-tooltip="false"
		      :marks="marks"
		      :startDate="`2023-12-02`"
		      v-model:date="date"
		      :desc="`为保证业务的正常运行，建议开启自动续约！开启自动续约后，下个计费周期（自然月）起始时将自动按当前设定的计费方式与规格自动完成续约。续约时需扣除相应费用，请确保账户余额充足。关闭自动续约后，到期时裸金属服务器将会被删除，数据无法找回。`"
	      />
      </div>
	    <div style="width: 500px; margin-top: 20px">
		    <el-form
			    ref="ruleFormRef"
			    :model="form"
			    label-width="auto"
			    style="width: 700px"
		    >
			    <CdsPassword
				    v-model:password="form.password"
				    v-model:confirmPassword="form.confirmPassword"
				    required
				    isAutomatically
			    />
			    <el-form-item>
				    <el-button type="primary" @click="submitForm(ruleFormRef)">
					    Create
				    </el-button>
				    <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
			    </el-form-item>
		    </el-form>
	    </div>
      <div style="margin:24px 0 14px;">Element-plus 组件</div>
      <div>
        <el-select></el-select>
      </div>
    </div>
    <div class="page-sub-title">组件内部使用方法</div>
    <highlightjs
      language="vue"
      code='
     
<script setup>
    import {useLocale} from "cds-ui-base-components/dist/hooks/useLocale.js";
	const {t} = useLocale()
	  ...
<script>

'></highlightjs>
    <div class="page-sub-title">应用</div>
    <highlightjs
      language="vue"
      code="
    //App.vue
    <template>
	    <cds-config-provider :locale='lang'>
	        <router-view></router-view>
	    </cds-config-provider>
    </template>
    

<script setup>
	// 取 cds 组件库的语言包，其包含了element-plus的相同的语言包
	import zhCn from 'cds-ui-base-components/dist/es/locale/zh-cn.mjs';
	import en from 'cds-ui-base-components/dist/es/locale/en.mjs';
	import {computed} from 'vue';
	import CdsConfigProvider from 'cds-ui-business-components/dist/es/cdsConfigProvider'
	import store from '@/store';
	const lang = computed(() =>{
	  return store.state.lang == 'en' ? en : zhCn
	})
	
</script>

"></highlightjs>
  </div>
  
  
  
</template>
<script setup>
import store from "@/store";
import {CdsMonthSlider} from 'cds-ui-business-components';
// import {CdsMonthSlider} from 'cds-ui-business-components';
import {inject, onMounted, reactive, ref} from "vue";
// import {CdsPassword} from 'cds-ui-business-components';
import {CdsPassword} from 'cds-ui-business-components'

const form = reactive({
	password: '',
	confirmPassword: ''
});
const submitForm = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
		} else {
			console.log('error submit!', fields)
		}
	})
};
const month = ref(0);
const checkbox = ref(true);
const marks = ref({
	0: '月底',
	1: '1个月',
	2: '',
	3: '',
	4: '',
	5: '',
	6: '6个月',
	7: '',
	8: '',
	9: '9个月',
	10: '',
	11: '',
	12: '1年',
	13: '2年',
	14: '3年',
})
const date = ref();

const lang = ref()
onMounted(() => {
	lang.value = store.state.lang
})
const click = () =>{
	if (store.state.lang == 'en') {
		store.commit('SET_LANG', 'zhCn')
		lang.value = 'zhCn'
	} else {
		store.commit('SET_LANG', 'en')
		lang.value = 'en'
	}
}

</script>
<style lang="scss">
pre code.hljs {
  font-size: 14px!important;
  font-family: auto!important;
}
.hljs{
  color: var(--el-text-color-primary);
  background-color: var(--backgroundColor2);
}
.page-wrap {
  text-align: left;
  font-size: 14px;
  .page-title {
    font-size: 36px;
    text-align: left;
    line-height: 100px;
    font-weight: bold;
  }
  
  .page-sub-title {
    font-size: 20px;
    font-weight: bold;
    margin: 24px 0;
  }
  
}
</style>
